<template>
    <div :style="baseInfo.domCss">
        <div v-for="(el,index) in baseInfo.defaultValue" :key="index" class="ShowDom">
            <img :src="el.url | formatUrl" v-if="el.type === 'image'" alt="" class="img">
            <audio :src="el.url" v-if="el.type === 'audio'" class="audio" controls controlsList="nodownload nofullscreen noremoteplayback" ></audio>
            <video :src="el.url" v-if="el.type === 'video'" class="video" controls controlsList="nodownload noremoteplayback" ></video>
            <p v-if="baseInfo.canDownload">{{el.name}} <span @click="handleDownload(el)">下载</span></p>
        </div>
    </div>
</template>

<script>
// import {downloadWithA} from '@/utils/download'
export default {
    props:{
        baseInfo:{
            type:Object,
            default:()=>{
                return {
                    domCss:'',
                    defaultValue:[],
                    canDownload:false
                }
            }
        },
    },
    created() {
            
    },
    mounted() {
        console.log(this.baseInfo.defaultValue)
        let audio = document.querySelectorAll('.ShowDom .audio');
        let video = document.querySelectorAll('.ShowDom .video');
        if(audio){
            Array.from(audio).forEach(el=>{
                el.addEventListener('play',this.PlayedHandler);
            })
        }
        if(video){
            Array.from(video).forEach(el=>{
                el.addEventListener('play',this.PlayedHandler);
            })
        }
    },
    methods: {
        PlayedHandler(event){
            this.Played(event.target);
        },
        Played(tar){
            let audio = document.querySelectorAll('.ShowDom .audio');
            let video = document.querySelectorAll('.ShowDom .video');
            let all = Array.from(audio).concat(Array.from(video));
            all.forEach(el=>{
                let t = el === tar;
                if(!t && !el.paused){
                    el.pause();
                }
            })
        },
        handleDownload(data){
            downloadWithA(data.url,data.name)
        }
    },
}
</script>

<style lang="scss" scoped>
    .ShowDom{
        >*{
            margin-bottom: 20px;
        }
        .img{
            max-width: 400px;
        }
        .video{
            width: 300px;
            background: #000;
        }
        p{
            line-height: 32px;
            margin-bottom: 0;
            span{
                margin-left: 12px;
                color:#2f89e4;
                cursor: pointer;
            }
        }
    }
</style>